<div class="panel panel-default panel-intro" style="margin: 0;">
    <div class="panel-heading" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none;">
        <h3 class="panel-title" style="font-size: 18px; font-weight: 600;"><i class="fa fa-file-text-o"></i> 申请详情</h3>
    </div>
    <div class="panel-body" style="padding: 30px;">
        <!-- 用户基本信息卡片 -->
        <div class="row" style="margin-bottom: 25px;">
            <div class="col-md-12">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h4 class="panel-title"><i class="fa fa-user"></i> 申请用户信息</h4>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="info-item">
                                    <label class="info-label">申请ID:</label>
                                    <span class="info-value badge badge-primary">{$row.id}</span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="info-item">
                                    <label class="info-label">用户名:</label>
                                    <span class="info-value">{$row.user.username}</span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="info-item">
                                    <label class="info-label">昵称:</label>
                                    <span class="info-value">{$row.user.nickname}</span>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 15px;">
                            <div class="col-md-4">
                                <div class="info-item">
                                    <label class="info-label">手机号:</label>
                                    <span class="info-value">{$row.user.mobile}</span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="info-item">
                                    <label class="info-label">邮箱:</label>
                                    <span class="info-value">{$row.user.email}</span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="info-item">
                                    <label class="info-label">课堂ID:</label>
                                    <span class="info-value">{$row.classroom_id}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 申请状态信息卡片 -->
        <div class="row" style="margin-bottom: 25px;">
            <div class="col-md-12">
                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <h4 class="panel-title"><i class="fa fa-clock-o"></i> 申请状态信息</h4>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="info-item">
                                    <label class="info-label">申请时间:</label>
                                    <span class="info-value">{$row.join_time_text}</span>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="info-item">
                                    <label class="info-label">申请状态:</label>
                                    <span class="info-value">
                                        {if $row.status == 0}
                                            <span class="label label-warning" style="font-size: 12px; padding: 5px 10px;"><i class="fa fa-clock-o"></i> 待审核</span>
                                        {elseif $row.status == 1}
                                            <span class="label label-success" style="font-size: 12px; padding: 5px 10px;"><i class="fa fa-check"></i> 已通过</span>
                                        {elseif $row.status == 2}
                                            <span class="label label-danger" style="font-size: 12px; padding: 5px 10px;"><i class="fa fa-times"></i> 已拒绝</span>
                                        {else}
                                            <span class="label label-default" style="font-size: 12px; padding: 5px 10px;"><i class="fa fa-ban"></i> 已取消</span>
                                        {/if}
                                    </span>
                                </div>
                            </div>
                            {if $row.approve_time}
                            <div class="col-md-3">
                                <div class="info-item">
                                    <label class="info-label">审核时间:</label>
                                    <span class="info-value">{$row.approve_time_text}</span>
                                </div>
                            </div>
                            {/if}
                            {if $row.approveAdmin}
                            <div class="col-md-3">
                                <div class="info-item">
                                    <label class="info-label">审核管理员:</label>
                                    <span class="info-value">{$row.approveAdmin.username}</span>
                                </div>
                            </div>
                            {/if}
                        </div>
                        <div class="row" style="margin-top: 15px;">
                            <div class="col-md-6">
                                <div class="info-item">
                                    <label class="info-label">创建时间:</label>
                                    <span class="info-value">{$row.create_time|date='Y-m-d H:i:s',###}</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="info-item">
                                    <label class="info-label">更新时间:</label>
                                    <span class="info-value">{$row.update_time|date='Y-m-d H:i:s',###}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 申请理由卡片 -->
        <div class="row" style="margin-bottom: 25px;">
            <div class="col-md-12">
                <div class="panel panel-default" style="border: 1px solid #e3e3e3; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                    <div class="panel-heading" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 5px 5px 0 0; padding: 15px;">
                        <h4 class="panel-title" style="margin: 0; font-size: 16px; font-weight: 600;"><i class="fa fa-comment-o"></i> 申请理由</h4>
                    </div>
                    <div class="panel-body" style="padding: 20px; background-color: #fafafa; line-height: 1.6; font-size: 14px;">
                        {$row.apply_reason|default='无'}
                    </div>
                </div>
            </div>
        </div>
        
        {if $row.reject_reason}
        <!-- 拒绝理由卡片 -->
        <div class="row" style="margin-bottom: 25px;">
            <div class="col-md-12">
                <div class="panel panel-default" style="border: 1px solid #e3e3e3; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                    <div class="panel-heading" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; border-radius: 5px 5px 0 0; padding: 15px;">
                        <h4 class="panel-title" style="margin: 0; font-size: 16px; font-weight: 600;"><i class="fa fa-exclamation-triangle"></i> 拒绝理由</h4>
                    </div>
                    <div class="panel-body" style="padding: 20px; background-color: #fafafa; line-height: 1.6; font-size: 14px;">
                        {$row.reject_reason}
                    </div>
                </div>
            </div>
        </div>
        {/if}
        
        <!-- 操作按钮区域 -->
        <div class="row" style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #e3e3e3;">
            <div class="col-md-12 text-center">
                <div class="btn-group">
                    {if $row.status == 0}
                    <a href="{:url('approve', ['ids' => $row.id])}" class="btn btn-success btn-dialog" title="审核申请" style="padding: 10px 25px; font-size: 14px; border-radius: 5px; margin-right: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                        <i class="fa fa-check"></i> 审核
                    </a>
                    {/if}

                </div>
            </div>
        </div>
    </div>
</div>